<script setup>
  import { onMounted, ref, computed } from 'vue'
  import {
    onLoad,
    onShow,
    onShareAppMessage,
    onUnload,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import infomask from '../txDraw/component/infomask.vue'
  import { useUsercodeStore } from '@/store/usercode.js'
  import dayjs from 'dayjs'
  import PayBox from '../../components/PayBox.vue'
  import Progress from '../../components/progress.vue'
  import Api from './api/index.js'
  const __Api = new Api()
  const createOrderUrl = ref('createBoxOrder')

  const blindboxId = ref()
  const goodsPayId = ref()
  const boxId = ref()
  //弹幕
  const barrageTopInfo = ref([])
  const barrageBottomInfo = ref([])
  // 三个轮播
  const threeAction = ref([])
  // 概率展示
  const showProbality = ref([])
  //商品
  const goodsList = ref([])
  const boxDetailInfo = ref()
  // 优惠券
  const couponId = ref('')
  const couponname = ref('')
  const couponType = ref(-1)
  const timeValue = ref(0)

  const shebei = ref(process.env.VUE_APP_PLATFORM)
  // 盲盒详情
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
        case_id: 0,
      },
    })
    boxId.value = res.data.box.id
    // 弹幕
    res.data.log.forEach((item, index) => {
      if (index <= Math.floor(res.data.log.length / 2)) {
        barrageTopInfo.value.push(item)
      } else {
        barrageBottomInfo.value.push(item)
      }
    })
    //三个轮播
    for (let i = 0; i < res.data.goods_info.length; i++) {
      threeAction.value.push(res.data.goods_info[i])
    }
    // 概率展示
    showProbality.value = res.data.box.probability_show
    //商品
    goodsList.value = res.data.goods_info
    boxDetailInfo.value = res.data.box
    if (is_khOpen.value) {
      clearInterval(intervalId)
      timeValue.value = +dayjs(res.data.box.s_time) - +dayjs()
      intervalId = setInterval(() => {
        timeValue.value = timeValue.value - 1000
      }, 1000) // 每秒增加count的值
    }
  }

  // 三个轮播
  setInterval(() => {
    let firstElement = threeAction.value.shift()
    // 将该元素添加到数组的末尾
    threeAction.value.push(firstElement)
  }, 6000)

  //去我的奖品
  function toMyReward() {
    uni.reLaunch({
      url: '/pages/bag/index',
    })
  }

  // 规则
  const rulepopup = ref()

  function rulePOP() {
    getRules(4)
    rulepopup.value.open('bottom')
  }

  // 出奖记录
  const currentId = ref(1)
  const historyPage = ref(1)
  const historyList = ref([])
  const historypopup = ref()

  function wxHistory() {
    currentId.value = 1
    historyPage.value = 1
    historyList.value = []
    getHistoryList()
    historypopup.value.open('bottom')
  }

  function closeHistory() {
    currentId.value = 1
    historyPage.value = 1
    historyList.value = []
    historypopup.value.close('bottom')
  }

  async function getHistoryList() {
    const res = await http.request({
      url: '/api/box/winLog',
      method: 'POST',
      data: {
        page: historyPage.value,
        limit: 10,
        rule_id: currentId.value,
        id: boxId.value,
      },
    })
    historyList.value = [...historyList.value, ...res.data]
  }

  //切换历史记录
  function getItemHistoryList(id) {
    if (currentId.value == id) {
      return
    }
    currentId.value = id
    historyPage.value = 1
    historyList.value = []
    getHistoryList()
  }

  //触底刷新
  function historyListLower() {
    ++historyPage.value
    getHistoryList()
  }

  // 支付
  const paypopup = ref()
  const paypopupBool = ref(false)
  const paymoney = ref()
  //有优惠券的jiage
  const realmoney = ref()
  const buyCount = ref(0)
  let intervalId = null

  function timeTxt(dateDiff) {
    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //天数

    var leave1 = dateDiff % (24 * 3600 * 1000) //剩余毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000)) //小时

    var leave2 = leave1 % (3600 * 1000) //剩余毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000)) //分钟

    var leave3 = leave2 % (60 * 1000) //剩余毫秒数
    var seconds = Math.floor(leave3 / 1000) //秒

    var leave4 = leave3 % 1000 //剩余毫秒数
    // var fenseconds = Math.floor(leave4 / 10) //分秒
    const hourstxt = hours < 10 ? '0' + hours : hours
    const minutestxt = minutes < 10 ? '0' + minutes : minutes
    const secondstxt = seconds < 10 ? '0' + seconds : seconds
    return hourstxt + ':' + minutestxt + ':' + secondstxt
  }
  const is_khOpen = computed(() => {
    if (boxDetailInfo.value) {
      const timeBool = +dayjs() < +dayjs(boxDetailInfo.value.s_time)
      if (
        boxDetailInfo.value.isMiaowa == 1 &&
        timeBool &&
        boxDetailInfo.value.is_kh_open == 1
      ) {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  })
  // const agree = ref(true)
  async function payPOP(count) {
    const userCodeStore = useUsercodeStore()
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }

    paypopup.value.open('bottom')
    paypopupBool.value = true
    paymoney.value = (boxDetailInfo.value.price * count).toFixed(2)
    // 每次点击重新选择优惠券
    realmoney.value = paymoney.value
    couponId.value = 0
    couponname.value = ''
    buyCount.value = count
  }

  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)

  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  //支付radio
  const currentradio = ref(3)

  function radioChange(evt) {
    currentradio.value = evt.detail.value
  }

  // 天选抽奖
  const haveDraw = ref([])
  // 星石支付

  function payReturnFun(res) {
    if (res.st == 1) {
      paypopup.value.close()
      paypopupBool.value = false
      for (let obj of res.data.box_goods) {
        if (obj.rule_id == 1) {
          getblindboxDetail()
        }
      }
      toactivity(res)
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      uni.utils.toast(res.msg)
    }
  }
  function toactivity(res) {
    haveDraw.value = res.data.box_goods
    // let game_id = ''
    // let switchNum = 0
    // let gamingNum = 0
    // let status = 0
    // if (res.data.minegame && res.data.minegame.switch == 1) {
    //   game_id = res.data.minegame.game_id
    //   switchNum = +res.data.minegame.in_seconds
    //   gamingNum = +res.data.minegame.game_seconds
    // }
    uni.navigateTo({
      url: `/drawPage/wxDrawCards/index?thecard=${encodeURIComponent(
        JSON.stringify(haveDraw.value)
      )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
        currentradio.value
      }&case_id=${caseId.value}&money=${paymoney.value}&img=${
        boxDetailInfo.value.img
      }&name=${boxDetailInfo.value.name}&couponid=${couponId.value}&order_id=${
        res.data.order_id
      }&&energy_info=${JSON.stringify(res.data.energy_info)}&is_flip=${
        res.data.is_flip
      }&is_integral=${boxDetailInfo.value.pay_type}&payGoodId=${
        boxDetailInfo.value.goodsPay?.id
      }&payGoodImg=${boxDetailInfo.value.goodsPay?.img}`,
      // &switchNum=${switchNum}&gamingNum=${gamingNum}&status=${status}&game_id=${game_id}
    })
  }
  function goRealName() {
    namepopup.value.open('center')
    uni.navigateTo({
      url: '/minePage/authentication/index',
    })
  }
  // 获取订单id
  const orderId = ref()
  const namepopup = ref()

  // 微信支付
  //轮询微信支付订单状态
  const timeStatu = ref(true)
  const paying = ref(1)

  //跳转无限抽卡
  const caseId = ref(-1)

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${blindboxId.value}&couponid=${couponId.value}`,
    })
  }

  // 规则
  const ruleStrings = ref('')
  async function getRules(id) {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    ruleStrings.value = res.data.details
  }

  const showGuide = ref(true)
  const guideBG = ref('')
  const guideId = ref([10, 11, 12, 13, 14])
  const guideList = ref([])
  async function getGuideBG() {
    const res = await http.request({
      url: '/api/index/getGuidance',
      method: 'POST',
      data: {
        id: guideId.value,
      },
    })
    guideList.value = res.data
    guideBG.value = res.data[0].img
  }

  const guideIndex = ref(0)

  function nextGuide() {
    const userCodeStore = useUsercodeStore()
    ++guideIndex.value
    if (guideIndex.value > 4) {
      showGuide.value = false
      userCodeStore.setFirstWX(1)
      return
    }
    guideBG.value = guideList.value[guideIndex.value].img
  }
  // 刷新
  const x = ref(10000)
  const y = ref(300)
  const refreshFlag = ref(true)
  const current = ref(0)
  const openRewardList = ref([])
  const ccRewardList = ref([])
  function refresh() {
    if (refreshFlag.value) {
      refreshFlag.value = false
      setTimeout(() => {
        refreshFlag.value = true
      }, 5000)
      if (current.value == 1) {
        prizePage.value = 1
        prizeFlag.value = true
        openRewardList.value = []
        openReward()
      } else if (current.value == 2) {
        ccPage.value = 1
        ccFlag.value = true
        ccRewardList.value = []
        ccReward()
      } else {
        openRewardList.value = []
        ccRewardList.value = []
        getblindboxDetail()
      }
    } else {
      uni.utils.toast('慢点~我还没准备好呢')
    }
  }
  function saveImg() {
    uni.downloadFile({
      //下载
      url: 'https://ojqn.wm2177.com/apk/qrcode/wechatcode.jpg', //图片下载地址
      success: (res) => {
        if (res.statusCode === 200) {
          uni.saveImageToPhotosAlbum({
            //保存图片到系统相册。
            filePath: res.tempFilePath, //图片文件路径
            success: function () {
              uni.showToast({
                title: '图片保存成功',
                icon: 'none',
              })
            },
            fail: function (e) {
              console.log(e)
              uni.showToast({
                title: '图片保存失败,请截图',
                icon: 'none',
              })
            },
          })
        }
      },
    })
  }
  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }
  function returnAddTime(item) {
    return dayjs(item * 1000).format('MM/DD HH:mm')
  }
  onShareAppMessage(() => {
    const userCodeStore = useUsercodeStore()
    const user = userCodeStore.usercode.user
    return {
      title: `${boxDetailInfo.value.name} | ${boxDetailInfo.value.price}一抽`,
      path: `drawPage/wxDraw/index?pid=${user}&id=${blindboxId.value}`,
    }
  })
  onLoad((option) => {
    const userCodeStore = useUsercodeStore()
    blindboxId.value = option.id

    const pid = option.pid
    uni.setStorageSync('pid', pid)
    if (userCodeStore.usercode.firstWX == 1 || !userCodeStore.usercode.user) {
      showGuide.value = false
    } else {
      // if(userCodeStore.usercode.user)
      getGuideBG()
    }
  })
  //
  let switchTimer = null
  let gamingTimer = null
  const switchNum = ref(0)
  const gamingNum = ref(0)
  const game_id = ref('')
  const gameStatus = ref()
  function switchFun() {
    switchTimer = setInterval(() => {
      switchNum.value = (switchNum.value - 1).toFixed(0)
      if (switchNum.value < 1) {
        switchState.value = 0
        clearInterval(switchTimer)
      }
    }, 1000)
  }
  function gamingFun() {
    gamingTimer = setInterval(() => {
      gamingNum.value = (gamingNum.value - 1).toFixed(0)
      if (gamingNum.value < 1) {
        switchState.value = 0
        clearInterval(gamingTimer)
      }
    }, 1000)
  }

  function togold() {
    clearInterval(gamingTimer)
    clearInterval(switchTimer)
    uni.navigateTo({
      url: `/drawPage/goldDraw/index?game_id=${game_id.value}&box_id=${boxId.value}`,
    })
  }
  //
  onUnload(() => {
    clearInterval(gamingTimer)
    clearInterval(switchTimer)
  })
  const percent = ref(0)
  const switchState = ref(0)
  const hasFeed = ref(false)
  function boxMineDetail() {
    __Api.boxMineDetail({ box_id: blindboxId.value, is_own: 1 }).then((res) => {
      if (res.st.game) {
        clearInterval(gamingTimer)
        clearInterval(switchTimer)
        const obj = res.st
        gameStatus.value = obj.game.status
        game_id.value = obj.game.game_id
        percent.value = obj.process.percent
        switchState.value = obj.game.switch
        hasFeed.value = true
        if (obj.game.switch == 1) {
          // 状态:0=待开始,1=进行中,2=已完成,-1=已超时
          if (gameStatus.value == 0) {
            switchNum.value = +obj.game.in_seconds_cutdown
            switchFun()
          }
          if (gameStatus.value == 1) {
            gamingNum.value = +obj.game.game_seconds_cutdown
            gamingFun()
          }
        }
      } else {
        hasFeed.value = false
      }
    })
  }
  onShow(() => {
    boxMineDetail()
    clearInterval(intervalId)
    getblindboxDetail()
    uni.$once('thecoupon', (data) => {
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = Number(
            (paymoney.value - data.coupon.money).toFixed(2)
          )
        } else if (data.coupon.type == 2) {
          realmoney.value = Number(
            (paymoney.value - data.coupon.money).toFixed(2)
          )
        } else if (data.coupon.type == 3) {
          realmoney.value = Number(
            (paymoney.value * data.coupon.discount).toFixed(2)
          )
        }
      }
    })
  })
</script>

<template>
  <view class="" v-if="boxDetailInfo">
    <view class="switchBox" v-if="switchState > 0" @click="togold()">
      <image
        src="https://ojqn.wm2177.com/wechat_imgs/gold/open.png"
        mode=""
      ></image>
      <view class="" style="font-size: 22rpx; color: red">
        剩余{{ gameStatus == 0 ? switchNum : gamingNum }}秒
      </view>
    </view>
    <view
      class="guide"
      v-if="showGuide"
      :style="'background-image:url(' + guideBG + ')'"
      @click="nextGuide"
    >
    </view>
    <view class="wx-content" v-else>
      <scroll-view scroll-y="true" class="scroll-Y" style="height: 100vh">
        <view class="" style="padding-bottom: 214rpx; padding-top: 32rpx">
          <view v-if="is_khOpen" class="kh_Box">
            <view class="kh_BoxItem">
              剩余时间：<span style="font-size: 30rpx; font-weight: 500">{{
                timeTxt(timeValue)
              }}</span>
            </view>
            <view class="kh_BoxItem">
              狂欢剩余发数：<span style="font-size: 28rpx; font-weight: 500">
                {{ boxDetailInfo.s_fa }} 发</span
              >
            </view>
          </view>
          <view
            class="wx-barrage"
            v-if="barrageTopInfo.length != 0 && !is_khOpen"
          >
            <view class="barrage-content">
              <view class="barrage-top">
                <view
                  class="barrage-item"
                  v-for="(item, index) in barrageTopInfo"
                  :key="'topbarrage' + index"
                >
                  <image
                    style="
                      width: 41rpx;
                      height: 41rpx;
                      border-radius: 50%;
                      margin-right: 8rpx;
                    "
                    :src="item.himg"
                    mode=""
                  ></image>
                  <text class="wx-goodsname">{{
                    `${item.nickname[0]}***抽中了${item.goods_name}`
                  }}</text>
                </view>
              </view>
              <view class="barrage-bottom">
                <view
                  class="barrage-item"
                  v-for="(item, index) in barrageTopInfo"
                  :key="'bottombarrage' + index"
                >
                  <image
                    style="
                      width: 41rpx;
                      height: 41rpx;
                      border-radius: 50%;
                      margin-right: 5rpx;
                    "
                    :src="item.himg"
                    mode=""
                  ></image>
                  <text>{{
                    `${item.nickname[0]}***抽中了${item.goods_name}`
                  }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="wx-top-content">
            <view class="rules" @click="rulePOP"> 规则 </view>
            <view class="wx-history" @click="wxHistory">出奖记录</view>
            <view class="my-reward" @click="toMyReward"> </view>
            <view class="content-top" v-if="boxDetailInfo">
              {{ boxDetailInfo.name || '' }}
            </view>
            <view class="content-list" v-if="threeAction.length">
              <view class="left">
                <image
                  :src="threeAction[0].img"
                  style="width: 100rpx; height: auto"
                  mode="widthFix"
                ></image>
                <view class="left-name">
                  <uni-notice-bar
                    :speed="10"
                    color="#3d3d3d"
                    background-color="transparent"
                    scrollable
                    :text="threeAction[0].goods_name"
                  />
                </view>
              </view>
              <view class="center">
                <image
                  :src="threeAction[1].img"
                  style="width: 150rpx; height: auto"
                  mode="widthFix"
                ></image>
                <view class="center-name">
                  <uni-notice-bar
                    :speed="10"
                    color="#3D3D3D"
                    background-color="transparent"
                    scrollable
                    :text="threeAction[1].goods_name"
                  />
                </view>
              </view>
              <view class="right">
                <image
                  :src="threeAction[2].img"
                  style="width: 100rpx; height: auto"
                  mode="widthFix"
                ></image>
                <view class="right-name">
                  <uni-notice-bar
                    :speed="10"
                    color="#3D3D3D"
                    background-color="transparent"
                    scrollable
                    :text="threeAction[2].goods_name"
                  />
                </view>
              </view>
            </view>
          </view>

          <view v-if="hasFeed" style="display: flex; justify-content: center">
            <Progress :percent="percent"></Progress>
          </view>
          <view class="wx-center-content">
            <!-- <view class="top-text"> </view> -->
            <view class="bottom-text" v-if="boxDetailInfo">
              <text>总No.{{ boxDetailInfo.no_get.no_get }}</text>
              <text>100%中奖</text>
              <text>{{
                `价值${Number(boxDetailInfo.min_price).toFixed(2)}~${Number(
                  boxDetailInfo.max_price
                ).toFixed(2)}元`
              }}</text>
            </view>
          </view>
          <!-- <view class="probability"> - 各款式获得概率 - </view> -->
          <view class="scroll-probability">
            <view class="scroll-H-view">
              <scroll-view class="scroll-view_H" scroll-x="true">
                <view
                  class="scroll-view-item_H"
                  v-for="(item, index) in showProbality"
                  :key="'probality' + index"
                  :class="{
                    'chuanshuo-color': item.id == 1,
                    'shishi-color': item.id == 2,
                    'xiyou-color': item.id == 3,
                    'putong-color': item.id == 4,
                  }"
                >
                  <text class="probability-top">
                    {{ Object.keys(item)[0] }}
                  </text>
                  <text class="probability-bottom">
                    {{ item[Object.keys(item)[0]] + '%' }}
                  </text>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="scroll-content">
            <!-- <scroll-view scroll-y="true" class="scroll-Y"> -->
            <view class="scroll-Y-view">
              <view
                v-for="(item, index) in goodsList"
                :key="'goodslist' + item.goods_id + index"
                @click="goodsinfo(index)"
                class="scroll-view-item"
                :class="{
                  'orange-bg': item.rule_id == '1',
                  'pink-bg': item.rule_id == '2',
                  'blue-bg': item.rule_id == '3',
                  'white-bg': item.rule_id == '4',
                }"
              >
                <image
                  style="height;: auto;width: 130rpx;margin-top: 20rpx;"
                  :src="item.img"
                  mode="widthFix"
                ></image>
                <view class="goodslist-name">
                  {{ item.goods_name }}
                </view>
                <view class="presale" v-if="item.goods_type == 1"> 预售 </view>
              </view>
            </view>
            <!-- </scroll-view> -->
          </view>
        </view>
      </scroll-view>
      <!-- 底部 -->
      <view class="wx-bottom" v-if="boxDetailInfo">
        <view class="button-group" v-if="boxDetailInfo.pattern == 2">
          <view class="button" @click="payPOP(1)">
            <view class="button-top"> 一发入魂 </view>
            <view class="button-bottom">
              <span v-if="boxDetailInfo.pay_type == 1">￥</span
              >{{ (boxDetailInfo.price * 1).toFixed(2) }}
              <img
                style="width: 40rpx; height: 40rpx"
                v-if="boxDetailInfo.pay_type == 3"
                :src="boxDetailInfo.goodsPay.img"
              />
            </view>
          </view>
          <view class="button" @click="payPOP(3)">
            <view class="button-top"> 三连无双 </view>
            <view class="button-bottom">
              <span v-if="boxDetailInfo.pay_type == 1">￥</span
              >{{ (boxDetailInfo.price * 3).toFixed(2) }}
              <img
                style="width: 40rpx; height: 40rpx"
                v-if="boxDetailInfo.pay_type == 3"
                :src="boxDetailInfo.goodsPay.img"
              />
            </view>
          </view>
          <view
            :class="{ button: !is_khOpen ? true : false, kh_button: is_khOpen }"
            @click="payPOP(10)"
          >
            <view class="button-top"> 十连超神 </view>
            <view class="button-bottom">
              <span v-if="boxDetailInfo.pay_type == 1">￥</span
              >{{ (boxDetailInfo.price * 10).toFixed(2) }}
              <img
                style="width: 40rpx; height: 40rpx"
                v-if="boxDetailInfo.pay_type == 3"
                :src="boxDetailInfo.goodsPay.img"
              />
            </view>
          </view>
        </view>
        <view
          class="button-group"
          style="justify-content: center"
          v-if="boxDetailInfo.pattern == 1"
        >
          <view class="button" @click="payPOP(1)">
            <view class="button-top"> 一发入魂 </view>
            <view class="button-bottom">
              <span v-if="boxDetailInfo.pay_type != 2">￥</span>
              {{ (boxDetailInfo.price * 1).toFixed(2) }}
            </view>
          </view>
        </view>
        <!-- <view class="abandon"> 未成年人禁止购买 </view> -->
      </view>
      <!-- 支付弹出层 -->
      <uni-popup ref="paypopup" type="bottom">
        <PayBox
          :is_integral="boxDetailInfo.pay_type == 2 ? true : false"
          v-if="paypopupBool"
          :couponname="couponname"
          :createOrderUrl="createOrderUrl"
          :realmoney="realmoney"
          :paymoney="paymoney"
          :couponId="couponId"
          :buyCount="buyCount"
          :blindboxId="blindboxId"
          @payReturnFun="payReturnFun"
          @chooseCoupon="chooseCoupon"
          :boxDetailInfo="boxDetailInfo"
        ></PayBox>
      </uni-popup>

      <infomask
        v-if="showmask"
        @close-mask="closeMask"
        :maskindex="maskindex"
        :thegoods="goodsList"
        :boxId="boxId"
      >
      </infomask>

      <!-- 规则弹出层 -->
      <uni-popup ref="rulepopup" type="bottom">
        <view class="rulepopup-content">
          <view
            class=""
            style="
              color: #3d3d3d;
              width: 100%;
              text-align: center;
              line-height: 128rpx;
            "
          >
            规则
          </view>
          <scroll-view scroll-y="true" style="height: 70vh">
            <view
              style="
                width: 94%;
                margin: 0 auto;
                color: #3d3d3d;
                padding-bottom: env(safe-area-inset-bottom);
              "
              class=""
            >
              <rich-text :nodes="ruleStrings"></rich-text>
            </view>
          </scroll-view>
        </view>
      </uni-popup>

      <!-- 出奖记录弹出层 -->
      <uni-popup ref="historypopup" type="bottom">
        <view class="historypopup-content">
          <view class="close-historypopup" @click="closeHistory"> </view>
          <view class="historypopup-content-title"> 出奖记录 </view>
          <view class="scroll-category">
            <view class="scroll-H-view">
              <scroll-view class="scroll-view_H" scroll-x="true">
                <view
                  class="scroll-view-item_H"
                  v-for="(item, index) in boxDetailInfo.ruleArr"
                  :key="'history' + index"
                  @click="getItemHistoryList(item.rule_id)"
                  :class="{
                    chuanshuo: item.rule_id == 1,
                    shishi: item.rule_id == 2,
                    xiyou: item.rule_id == 3,
                    putong: item.rule_id == 4,
                  }"
                >
                  <!-- <text class="probability-top">
   								{{ Object.keys(item)[0] }}
   							</text>
   							<text class="probability-bottom">
   								{{ item[Object.keys(item)] + '%' }}
   							</text> -->
                  <view
                    class="history-aim"
                    :style="[
                      {
                        display: item.rule_id == currentId ? 'block' : 'none',
                      },
                    ]"
                  >
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>

          <view class="history-list" v-if="historyList.length">
            <scroll-view
              scroll-y="true"
              class="scroll-Y"
              style="height: 61vh"
              @scrolltolower="historyListLower"
            >
              <view
                class="history-item"
                v-for="(item, index) in historyList"
                :key="'historylist' + index"
              >
                <image
                  v-if="item.is_double != 0"
                  class="double"
                  mode=""
                  src="../../static/double2.png"
                ></image>
                <view class="" style="display: flex; align-items: center">
                  <image
                    :src="item.himg || ''"
                    style="
                      width: 94rpx;
                      height: 94rpx;
                      border-radius: 50%;
                      flex-shrink: 0;
                    "
                    mode=""
                  ></image>
                  <view style="margin-left: 16rpx">
                    <view class="" style="display: flex; align-items: center">
                      <text style="width: 120rpx"
                        >{{ item.nickname ? item.nickname[0] : '' }}****</text
                      >
                      <text
                        class="history-name"
                        style="width: 52%; font-size: 23rpx; margin-left: 20rpx"
                        >{{ item.goods_name }}</text
                      >
                    </view>
                    <view class="" style="display: flex; align-items: center">
                      <text
                        style="font-size: 20rpx; color: #746e8c; width: 120rpx"
                        >No:{{ item.no_get }}</text
                      >
                      <text
                        style="
                          font-size: 20rpx;
                          color: #746e8c;
                          margin-left: 20rpx;
                        "
                        >{{ returnAddTime(item.add_time) }}</text
                      >
                    </view>
                  </view>
                </view>
                <image
                  :src="item.goods_img"
                  style="
                    width: 94rpx;
                    height: 94rpx;
                    border-radius: 10rpx;
                    flex-shrink: 0;
                  "
                  mode=""
                ></image>
              </view>
            </scroll-view>
          </view>
        </view>
      </uni-popup>
      <!-- 刷新 -->
      <movable-area class="movableArea">
        <movable-view
          :x="x"
          :y="y"
          direction="all"
          class="movableView"
          inertia="true"
          @click="refresh"
        >
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/newdesign/refresh3.png"
            mode=""
            style="width: 110rpx; height: 110rpx"
          ></image>
        </movable-view>
      </movable-area>

      <!-- 实名制出层 -->
      <uni-popup ref="namepopup" type="center">
        <!--  -->
        <view class="namepopup-content 1" v-if="shebei == 'mp-weixin'">
          <view class="namepopup-title"> 提示 </view>
          <view class="namepopup-content-tow">
            鉴于您是平台的优质用户，为了能给您提供更好的服务体验，请先完成实名制认证。</view
          >
          <view class="namepopup-button">
            <view class="" @click="namepopup.close('center')"> 再想一下 </view>
            <view class="" @click="goRealName"> 确认实名 </view>
          </view>
        </view>
        <view class="namepopup-content 2" v-else>
          <view class="namepopup-title"> 提示 </view>
          <view class="namepopup-content-tow">
            鉴于您是平台的优质用户，请前往微信小程序，搜索 欧魂online
            进行实名制认证。</view
          >
          <view
            class=""
            style="display: flex; justify-content: center; margin-bottom: 40rpx"
          >
            <image
              style="width: 160rpx; height: 160rpx"
              src="https://ojqn.wm2177.com/apk/qrcode/wechatcode.jpg"
              mode="widthFix"
            ></image>
          </view>
          <view class="namepopup-button">
            <view @click="saveImg">保存二维码</view>
            <view class="" @click="namepopup.close('center')"> 我知道了 </view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .switchBox {
    position: absolute;
    width: 120rpx;
    height: 120rpx;
    text-align: center;
    top: 380rpx;
    right: 20rpx;
    z-index: 100;
    image {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
  .kh_button {
    width: 205rpx;
    height: 84rpx;
    padding-top: 9rpx;
    box-sizing: border-box;
    text-align: center;
    font-weight: 800;
    color: #383838 !important;
    border-radius: 8rpx;
    background: linear-gradient(
      45deg,
      rgb(242, 97, 94),
      rgb(234, 150, 104),
      rgb(251, 200, 2),
      rgb(174, 9, 43)
    );
    background-size: 400%;
    animation: gradientBackground 1.5s linear alternate infinite;
    .button-top {
      font-size: 30rpx;
      line-height: 40rpx;
    }

    .button-bottom {
      font-size: 22rpx;
      line-height: 22rpx;
    }
  }

  @keyframes gradientBackground {
    0% {
      transform: scale(1);
      background-position: 0%;
    }
    50% {
      transform: scale(1.02);
      background-position: 50%;
    }
    100% {
      transform: scale(1);
      background-position: 100%;
    }
  }
  .kh_Box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0rpx 34rpx 30rpx 34rpx;
    .kh_BoxItem {
      width: 320rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 4rpx;
      // border: 4rpx solid #8cf6ff;
      font-size: 24rpx;
      color: #404132;
      text-align: center;
      animation: redBg 5s infinite alternate;
      background: linear-gradient(
        45deg,
        rgb(242, 97, 94),
        rgb(234, 150, 104),
        rgb(251, 200, 2),
        rgb(174, 9, 43)
      );
      background-size: 400%;
      animation: gradientBackground 1.5s linear alternate infinite;
    }
  }

  // 卡片背景
  .orange-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/orange-bg2.png')
      no-repeat;
    background-size: contain;
  }

  .pink-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/pink-bg2.png')
      no-repeat;
    background-size: contain;
  }

  .blue-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/blue-bg2.png')
      no-repeat;
    background-size: contain;
  }

  .white-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/white-bg2.png')
      no-repeat;
    background-size: contain;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
      /* 初始位置 */
    }

    100% {
      transform: translateX(-100%);
      /* 终点位置 */
    }
  }

  .guide {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  .wx-content {
    height: 100vh;
    // background-color: #1a133f;
    background-image: linear-gradient(
      180deg,
      #f8ec8a,
      #f9ed8b,
      #ffefff 34%,
      #eaf7ff,
      #ffffff 41%
    );
    color: white;
    overflow: hidden;

    .wx-barrage {
      height: 124rpx;
      overflow: hidden;

      .barrage-content {
        height: 139rpx;
        animation: scroll 30s linear infinite;

        /* 滚动动画 */
        .barrage-top {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .barrage-item {
            margin-right: 51rpx;
            align-items: center;

            &:nth-child(2n) {
              background-color: rgba(198, 144, 251, 0.5);
            }

            &:nth-child(3n) {
              background-color: rgba(155, 233, 248, 0.6);
            }

            &:nth-child(4n) {
              background-color: rgba(252, 117, 248, 0.6);
            }
          }
        }

        .barrage-bottom {
          display: flex;
          align-items: center;

          .barrage-item {
            margin-left: 51rpx;
            background-color: rgba(247, 251, 139, 0.5);

            &:nth-child(2n) {
              background-color: rgba(243, 184, 115, 0.5);
            }

            &:nth-child(3n) {
              background-color: rgba(66, 46, 109, 0.5);
            }

            &:nth-child(4n) {
              background-color: rgba(251, 150, 224, 0.5);
            }
          }
        }

        .barrage-item {
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
          height: 48rpx;
          padding: 8rpx;
          box-sizing: border-box;
          border-radius: 24rpx;
          background-color: rgba(251, 150, 224, 0.5);

          text {
            font-size: 20rpx;
          }
        }
      }
    }

    .wx-top-content {
      position: relative;
      z-index: 1;
      height: 402rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-content2.png')
        no-repeat;
      background-size: 100%;

      .rules {
        position: absolute;
        top: 28rpx;
        left: 38rpx;
        width: 63rpx;
        height: 31rpx;
        background-color: #ffec53;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 31rpx;
        text-align: center;
        color: #3d3d3d;
      }

      .wx-history {
        position: absolute;
        top: 68rpx;
        left: 36rpx;
        width: 106rpx;
        height: 43rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/wx-history2.png')
          no-repeat;
        background-size: contain;
        border-radius: 6rpx;
        font-size: 22rpx;
        line-height: 43rpx;
        font-weight: 700;
        color: #3d3d3d;
        text-align: center;
      }

      .my-reward {
        position: absolute;
        top: -32rpx;
        right: 18rpx;
        width: 133rpx;
        height: 133rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/my-gift2.png')
          no-repeat;
        background-size: contain;
      }

      .content-top {
        font-size: 40rpx;
        line-height: 90rpx;
        font-weight: 800;
        text-align: center;
        font-style: italic;
        color: #3d3d3d;
        padding-top: 13rpx;
        text-shadow: 2px 2px 2px #ffee8b;
      }

      .content-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 71%;
        padding: 0 20rpx;
        color: #3d3d3d !important;

        ::v-deep .uni-noticebar {
          height: 25rpx;
          // margin-top: 18rpx;

          .uni-noticebar__content-text {
            font-size: 14rpx;
          }
        }

        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 207rpx;
          height: 179rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-goods-left2.png')
            no-repeat;
          background-size: 100%;
          color: #3d3d3d;

          .left-name {
            position: absolute;
            left: 39rpx;
            bottom: 9rpx;
            width: 134rpx;
            height: 25rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-name-left2.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
            color: #3d3d3d;
          }
        }

        .center {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 276rpx;
          height: 238rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-goods-mid2.png')
            no-repeat;
          background-size: 100%;
          color: #3d3d3d;

          .center-name {
            position: absolute;
            left: 51rpx;
            bottom: 12rpx;
            width: 178rpx;
            height: 32rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-name-mid2.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
            color: #3d3d3d;

            ::v-deep .uni-noticebar {
              height: 32rpx;
              // margin-top: 18rpx;

              .uni-noticebar__content-text {
                font-size: 20rpx;
              }
            }
          }
        }

        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 207rpx;
          height: 179rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-goods-left2.png')
            no-repeat;
          background-size: 100%;

          .right-name {
            position: absolute;
            left: 39rpx;
            bottom: 9rpx;
            width: 134rpx;
            height: 25rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/top-name-left2.png')
              no-repeat;
            background-size: 100%;
            font-size: 18rpx;
            text-align: center;
            line-height: 25rpx;
          }
        }
      }
    }

    .wx-center-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      // top: -30rpx;
      z-index: 0;
      height: 76rpx;
      margin: 8rpx 0;
      box-sizing: border-box;
      background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/mid-content2.png')
        no-repeat;
      background-size: 100%;

      .top-text {
        position: absolute;
        top: 106rpx;
        width: 436rpx;
        height: 40rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/wx/center-content-title.png')
          no-repeat;
        background-size: 100%;
      }

      .bottom-text {
        position: absolute;
        top: 22rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 22rpx;
        color: #3d3d3d;

        text {
          &:nth-child(2) {
            display: inline-block;
            width: 116rpx;
            height: 32rpx;
            margin-right: 10rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/hundrend2.png')
              no-repeat;
            background-size: 100%;
            line-height: 28rpx;
            text-align: center;
            font-size: 20rpx;
            font-weight: normal;
            color: #3d3d3d;
          }
        }
      }
    }

    .probability {
      width: 100%;
      position: relative;
      top: -35rpx;
      text-align: center;
      font-size: 22rpx;
    }

    // 概率滑动
    .scroll-probability {
      .scroll-H-view {
        height: 76rpx;
        margin: 0 21rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/scroll-back2.png')
          no-repeat;
        background-size: 100% 84%;
        overflow: hidden;

        .scroll-view_H {
          white-space: nowrap;
          width: 96%;
          margin: 0 12rpx;

          .scroll-view-item_H {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 228rpx;
            height: 68rpx;
            text-align: center;
            // line-height: 86rpx;

            .probability-top {
              margin-right: 10rpx;
              font-size: 26rpx;
              font-weight: 500;
            }

            .probability-bottom {
              font-size: 22rpx;
              font-weight: 500;
            }
          }

          .chuanshuo-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pink.png')
              no-repeat;
            background-size: contain;
          }

          .shishi-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-orange.png')
              no-repeat;
            background-size: 100%;
          }

          .xiyou-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-blue.png')
              no-repeat;
            background-size: 100%;
          }

          .putong-color {
            background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-pt.png')
              no-repeat;
            background-size: 100%;
          }
        }
      }
    }

    // 内容滑动
    .scroll-content {
      // .scroll-Y {
      width: 100%;

      // height: 38vh;
      .scroll-Y-view {
        width: 100%;
        padding: 0rpx 5rpx 0rpx 5rpx;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        color: #3d3d3d;
        font-weight: 600;
        font-size: 23rpx;

        .scroll-view-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          width: 224rpx;
          height: 265rpx;
          padding-top: 42rpx;
          padding-bottom: 10rpx;
          box-sizing: border-box;
          margin-bottom: 20rpx;

          // margin-right: 10rpx;
          &:nth-child(3n) {
            margin-right: 0;
          }

          .goodslist-name {
            width: 100%;
            height: 30rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            font-size: 20rpx;
            // background: rgba(255, 255, 255, 0.5);
            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 超出部分用省略号表示 */
            white-space: normal;
            /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }

          .presale {
            position: absolute;
            top: 14rpx;
            right: 0rpx;
            width: 60rpx;
            height: 30rpx;
            // background-color: rgba(0, 0, 0, 0.2);
            font-size: 16rpx;
            text-align: center;
            line-height: 30rpx;
          }
        }
      }

      // }
    }

    .wx-bottom {
      position: fixed;
      bottom: 0;
      z-index: 99;
      height: 214rpx;
      width: 100%;
      // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/bottom2.png')
      // no-repeat;
      // background-size: 100%;

      .button-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16rpx;
        margin-top: 56rpx;
        box-sizing: border-box;

        .button {
          width: 205rpx;
          height: 84rpx;
          padding-top: 9rpx;
          box-sizing: border-box;
          background-color: pink;
          background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/button2.png')
            no-repeat;
          background-size: 100%;
          text-align: center;
          color: #1f1f1f;
          font-weight: 800;

          &:last-child {
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/button-ten.png')
              no-repeat;
            background-size: 100%;
            color: #1f1f1f;
          }

          .button-top {
            font-size: 30rpx;
            line-height: 40rpx;
          }

          .button-bottom {
            font-size: 22rpx;
            line-height: 22rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .abandon {
        width: 100%;
        margin-top: 30rpx;
        text-align: center;
        font-size: 22rpx;
        color: #3d3d3d;
      }
    }

    .rulepopup-content {
      height: 1117rpx;
      // background-color: #1a133f;
      background-image: linear-gradient(
        162deg,
        #ffe60f 3%,
        #fbf7e7 10%,
        #fff6a8 67%,
        #f7efa6 104%
      );
      color: #3d3d3d;
    }

    .historypopup-content {
      position: relative;
      height: 76vh;
      padding: 25rpx 34rpx;
      box-sizing: border-box;
      // background-color: #1a133f;
      background-image: linear-gradient(
        162deg,
        #ffe60f 3%,
        #fbf7e7 10%,
        #fff6a8 67%,
        #f7efa6 104%
      );

      .close-historypopup {
        position: absolute;
        top: 32rpx;
        right: 28rpx;
        width: 63rpx;
        height: 57rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/close.png')
          no-repeat;
        background-size: 100%;
      }

      .historypopup-content-title {
        margin-bottom: 50rpx;
        font-size: 44rpx;
        font-weight: 800;
        text-align: center;
        color: #1f1f1f;
        // font-style: italic;
        // text-shadow: 2px 2px 2px #7863ff;
      }

      .scroll-category {
        .scroll-H-view {
          height: 76rpx;
          // margin: 0 21rpx;
          box-sizing: border-box;
          // background: url('https://ojqn.wm2177.com/wechat_imgs/wx/scroll-back.png')
          // 	no-repeat;
          // background-size: contain;
          overflow: hidden;

          .scroll-view_H {
            white-space: nowrap;
            height: 66rpx;
            width: 100%;

            .scroll-view-item_H {
              position: relative;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 172rpx;
              height: 48rpx;
              text-align: center;
              // line-height: 86rpx;

              .history-aim {
                position: absolute;
                bottom: -20rpx;
                left: 50%;
                transform: translateX(-50%);
                width: 20rpx;
                height: 20rpx;
              }

              .probability-top {
                margin-right: 10rpx;
                font-size: 26rpx;
                font-weight: 500;
              }

              .probability-bottom {
                font-size: 22rpx;
                font-weight: 500;
              }
            }

            .chuanshuo {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-orange.png')
                no-repeat;
              background-size: contain;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-orange.png')
                  no-repeat;
                background-size: 100%;
              }
            }

            .shishi {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-pink.png')
                no-repeat;
              background-size: 100%;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-pink.png')
                  no-repeat;
                background-size: 100%;
              }
            }

            .xiyou {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-purple.png')
                no-repeat;
              background-size: 100%;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-purple.png')
                  no-repeat;
                background-size: 100%;
              }
            }

            .putong {
              background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/history-blue.png')
                no-repeat;
              background-size: 100%;

              .history-aim {
                background: url('https://ojqn.wm2177.com/wechat_imgs/wx/history/aim-blue.png')
                  no-repeat;
                background-size: 100%;
              }
            }
          }
        }
      }

      .history-list {
        .history-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 120rpx;
          margin-bottom: 10rpx;
          padding: 0 14rpx;
          box-sizing: border-box;
          background-color: #fff;
          color: #3d3d3d;
          position: relative;
          .double {
            position: absolute;
            width: 60rpx;
            height: 60rpx;
            top: 0;
            right: 0;
          }
          // background-color: #251d49;

          border-radius: 10rpx;
          font-size: 28rpx;

          .history-name {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 超出部分用省略号表示 */
            white-space: normal;
            /* 允许换行 */
            /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
          }
        }
      }
    }
  }
  // 刷新
  .movableArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .movableView {
    pointer-events: auto;
    width: 110rpx;
    height: 110rpx;
    border-radius: 100%;
    // z-index: 999;
  }

  .namepopup-content {
    width: 600rpx;
    // height: 404rpx;
    padding: 10px 30rpx;
    box-sizing: border-box;
    border-radius: 36rpx;
    background-color: #fff;

    .namepopup-title {
      height: 114rpx;
      border-bottom: 1px solid #d8d8d8;
      text-align: center;
      font-size: 40rpx;
      line-height: 114rpx;
      color: black;
    }

    .namepopup-content-tow {
      height: 164rpx;
      padding-top: 32rpx;
      box-sizing: border-box;
      text-align: center;
      font-size: 28rpx;
      color: #9b9b9d;
    }

    .namepopup-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;

      // margin-top: 26rpx;
      view {
        width: 234rpx;
        height: 80rpx;
        background-color: $all-color;
        border-radius: 40rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 700;
        line-height: 80rpx;

        &:first-child {
          border: 2rpx solid $all-color;
          background-color: #fff;
          color: $all-color;
        }
      }
    }
  }
</style>
